import React from 'react';
import {Card, Typography, Space, Divider, Row, Col, Image} from 'antd';
import {
    FormOutlined,  // 替换 FormulaOutlined
    AimOutlined,
    ExperimentOutlined,
    CheckCircleOutlined,
    FunctionOutlined, // 添加新的图标
} from '@ant-design/icons';
import ReactECharts from 'echarts-for-react';
import styles from './index.module.css';

const {Title, Paragraph, Text} = Typography;
const CosineIntroduction: React.FC = () => {
    // 生成向量可视化的示例数据
    const getVectorVisualizationOption = () => ({
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['向量A', '向量B']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            name: 'X轴'
        },
        yAxis: {
            type: 'value',
            name: 'Y轴'
        },
        series: [
            {
                name: '向量A',
                type: 'line',
                data: [[0, 0], [3, 4]],
                symbolSize: 10,
                lineStyle: {
                    width: 2,
                    type: 'solid'
                }
            },
            {
                name: '向量B',
                type: 'line',
                data: [[0, 0], [4, 3]],
                symbolSize: 10,
                lineStyle: {
                    width: 2,
                    type: 'solid'
                }
            }
        ]
    });

//     return (
//         <div className={styles.container}>
//             <Card className={styles.mainCard}>
//                 <Typography>
//                     <Title level={2}>
//                         <FormulaOutlined /> Cosine 相似度算法说明
//                     </Title>
//
//
//                 </Typography>
//             </Card>
//         </div>
//     );
// };
    return (
        <div className={styles.container}>
            <Card className={styles.mainCard}>
                <Typography>
                    <Title level={2}>
                        <FunctionOutlined/> Cosine 相似度算法说明 {/* 使用 FunctionOutlined 替代 FormulaOutlined */}
                    </Title>
                    <Divider/>

                    <section className={styles.section}>
                        <Title level={3}>
                            <AimOutlined/> 算法原理
                        </Title>
                        <Paragraph>
                            Cosine相似度是通过计算两个向量的夹角余弦值来度量它们之间的相似性。余弦相似度的取值范围在[-1,1]之间，
                            值越接近1表示两个向量越相似，值越接近-1表示两个向量越相反，0表示两个向量正交（垂直）。
                        </Paragraph>

                        <Row gutter={24} className={styles.formulaSection}>
                            <Col span={12}>
                                <Card className={styles.formulaCard}>
                                    <Title level={4}>计算公式</Title>
                                    <div className={styles.formula}>
                                        <Text code>
                                            cos(θ) = (A·B)/(||A||·||B||)
                                        </Text>
                                    </div>
                                    <Paragraph>
                                        其中：
                                        <ul>
                                            <li>A·B 表示向量A和B的点积</li>
                                            <li>||A|| 和 ||B|| 分别表示向量A和B的模长</li>
                                            <li>θ 表示向量A和B之间的夹角</li>
                                        </ul>
                                    </Paragraph>
                                </Card>
                            </Col>
                            <Col span={12}>
                                <Card className={styles.visualizationCard}>
                                    <Title level={4}>向量可视化</Title>
                                    <ReactECharts option={getVectorVisualizationOption()} style={{height: '300px'}}/>
                                </Card>
                            </Col>
                        </Row>
                    </section>

                    <section className={styles.section}>
                        <Title level={3}>
                            <ExperimentOutlined/> 应用场景
                        </Title>
                        <Row gutter={[24, 24]}>
                            <Col span={8}>
                                <Card className={styles.scenarioCard}>
                                    <Title level={4}>文本相似度分析</Title>
                                    <Paragraph>
                                        将文本转换为词频向量，计算文档之间的相似度，
                                        常用于文档检索、文本分类和相似文档推荐。
                                    </Paragraph>
                                </Card>
                            </Col>
                            <Col span={8}>
                                <Card className={styles.scenarioCard}>
                                    <Title level={4}>推荐系统</Title>
                                    <Paragraph>
                                        计算用户兴趣向量或物品特征向量之间的相似度，
                                        用于实现个性化推荐。
                                    </Paragraph>
                                </Card>
                            </Col>
                            <Col span={8}>
                                <Card className={styles.scenarioCard}>
                                    <Title level={4}>图像相似度</Title>
                                    <Paragraph>
                                        将图像特征转换为向量，计算图像之间的相似度，
                                        用于图像检索和相似图像查找。
                                    </Paragraph>
                                </Card>
                            </Col>
                        </Row>
                    </section>

                    <section className={styles.section}>
                        <Title level={3}>
                            <CheckCircleOutlined/> 算法优势
                        </Title>
                        <Row gutter={[24, 24]}>
                            <Col span={12}>
                                <Card className={styles.advantageCard}>
                                    <ul className={styles.advantageList}>
                                        <li>计算简单，执行效率高</li>
                                        <li>对向量长度不敏感，只关注方向</li>
                                        <li>适用于高维稀疏向量</li>
                                        <li>结果易于理解和解释</li>
                                    </ul>
                                </Card>
                            </Col>
                            <Col span={12}>
                                <Card className={styles.advantageCard}>
                                    <ul className={styles.advantageList}>
                                        <li>广泛应用于文本挖掘和信息检索</li>
                                        <li>支持实时计算和大规模数据处理</li>
                                        <li>可以有效处理文本长度差异</li>
                                        <li>支持增量更新和并行计算</li>
                                    </ul>
                                </Card>
                            </Col>
                        </Row>
                    </section>

                    <section className={styles.section}>
                        <Title level={3}>使用注意事项</Title>
                        <Card className={styles.noticeCard}>
                            <ul className={styles.noticeList}>
                                <li>向量应进行适当的预处理和归一化</li>
                                <li>需要考虑数据稀疏性的影响</li>
                                <li>对于较短的文本，可能需要额外的处理</li>
                                <li>计算结果范围在[-1,1]之间，通常只考虑正值</li>
                                <li>不考虑词序和语义信息，仅基于词频计算</li>
                            </ul>
                        </Card>
                    </section>
                    {/* 其余代码保持不变 */}
                </Typography>
            </Card>
        </div>
    );
};
export default CosineIntroduction;
